<template>
  <div class="c-p c-h">
    <img src="" class="c-w100 qr" id="qrImg" />
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
export default {
  name: "CourseForenoticeQrcode",
  data() {
    return {
      cId: -1,
      courseBackgroundImg: "",
      courseQrcode: ""
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    drawImg() {
      var c = document.createElement('canvas');
      c.width = 640;
      c.height = 1054;
      var ctx = c.getContext("2d");

      let img1 = new Image(640, 1054);
      let urlv = this.courseBackgroundImg;
      if (urlv.indexOf("https") != -1) {
        urlv = urlv.replace("https", 'http');
      }
      img1.crossOrigin = 'anonymous';
      img1.src = urlv;
      let $this = this;
      img1.onload = function () {
        ctx.save();
        ctx.drawImage(img1, 0, 0, 640, 1054);

        let img2 = new Image();
        img2.crossOrigin = 'anonymous';
        let that = $this;
        img2.src = that.courseQrcode;//'data:image/svg+xml;base64,' + window.btoa(unescape(
        img2.onload = function () {
          ctx.save();
          ctx.drawImage(img2, 160, 320, 320, 320);
          convertCanvasToImage(ctx);
        };
        img2.onerror = function () {
          console.log("333");
        }
      };

      function convertCanvasToImage(ctx) {
        try {
          var dataURL = ctx.canvas.toDataURL("image/jpeg");
          let ig = document.getElementById('qrImg');
          ig.setAttribute("src", dataURL);
        } catch (err) {
          console.log(err.message)
          console.log(err.stack)
        }
      }
    },
    //分享
    wechatShare: function () {
      let title = "课程预告二维码";
      let shareImg = this.courseQrcode;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?cId=${this.cId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = "课程预告值得关注哦~";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = "课程预告二维码";
      let shareImg = this.courseQrcode;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?cId=${this.cId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = "课程预告值得关注哦~";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  },
  activated() {
    setDocumentTitle("课程预告二维码");// eslint-disable-line
    this.cId = this.$route.query.cId;
    let $this = this;
    utilJs.getMethod(global.apiurl + 'courses/previews/' + this.cId + '/qrcode', function (res) {
      $this.courseBackgroundImg = res.qrcodeBg;
      $this.courseQrcode = res.qrcodeUrl;
      $this.drawImg();
      $this.wechatShare();
      $this.$cjConfirm({
        title: '提示',
        message: '生成图片时间较长，请耐心等待！',
        showCancelButton: false,
        clickCloseModal: false
      })
    });
  },
  deactivated() {

  }
};
</script>
<style scoped>
.img-qrcode {
  width: 8rem;
  height: 8rem;
  position: absolute;
  left: 8rem;
  top: 40%;
  transform: translate(-50%, -50%);
}
.qr {
  width: 100%;
  max-height: 100%;
}
</style>


